Animation
Spiral Vortex Animation in Framer
Created by
About the resource
To create this in Framer, I first identified opportunities to simplify the structure of the animation.
I noticed that these arm frames were behaving the same way, so if I focused on rebuilding one of them, all I had to do was duplicate them right on top of each other with different rotation values.
About the resource
To create this in Framer, I first identified opportunities to simplify the structure of the animation.
I noticed that these arm frames were behaving the same way, so if I focused on rebuilding one of them, all I had to do was duplicate them right on top of each other with different rotation values.
About the resource
To create this in Framer, I first identified opportunities to simplify the structure of the animation.
I noticed that these arm frames were behaving the same way, so if I focused on rebuilding one of them, all I had to do was duplicate them right on top of each other with different rotation values.
Arm frames highlighted with red lines.
Arm frames highlighted with red lines.
Arm frames highlighted with red lines.
So I assembled a component to build an arm frame that has a looping animation like the one we see on the original website. It consists of multiple variants connected with appear interactions to play the animation automatically.
So I assembled a component to build an arm frame that has a looping animation like the one we see on the original website. It consists of multiple variants connected with appear interactions to play the animation automatically.
So I assembled a component to build an arm frame that has a looping animation like the one we see on the original website. It consists of multiple variants connected with appear interactions to play the animation automatically.
The Arm Component and its variants.
The Arm Component and its variants.
The Arm Component and its variants.
Once I had this, all I had to do was put them on top of each other, and rotate each one a little more to get a full circle.
Once I had this, all I had to do was put them on top of each other, and rotate each one a little more to get a full circle.
Once I had this, all I had to do was put them on top of each other, and rotate each one a little more to get a full circle.
